<template>
  <el-dialog
    v-model="show"
    :title="'我司人员'"
    width="1021px"
    modal-class="docDetailAddEmployee-dailog"
  >
    <div style="height: 100%">
      <el-form :model="employeeForm" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="业务员">
              <el-select
                v-model="employeeForm.sailsman"
                placeholder="请选择"
                style="width: 100%"
                clearable
                filterable
                @change="sailsmanChange"
              >
                <el-option
                  v-for="item in employee"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务员电话">
              <el-input
                v-model="employeeShow.sailsmanPhone"
                placeholder="请输入（若需多个，请用/进行区分）"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务员邮箱">
              <el-input
                v-model="employeeShow.sailsmanEmail"
                disabled
                placeholder="请输入（若需多个，请用/进行区分）"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作员">
              <el-select
                v-model="employeeForm.operator"
                placeholder="请选择"
                style="width: 100%"
                @change="operatorChange"
                clearable
                filterable
              >
                <el-option
                  v-for="item in employee"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作员电话">
              <el-input
                v-model="employeeShow.operatorPhone"
                disabled
                placeholder="请输入（若需多个，请用/进行区分）"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作员邮箱">
              <el-input
                v-model="employeeShow.operatorEmail"
                disabled
                placeholder="请输入（若需多个，请用/进行区分）"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="商务">
              <el-select
                v-model="employeeForm.businessman"
                placeholder="请选择"
                style="width: 100%"
                clearable
                @change="businessmanChange"
                filterable
              >
                <el-option
                  v-for="item in employee"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商务电话">
              <el-input
                v-model="employeeShow.businessmanPhone"
                disabled
                placeholder="请输入（若需多个，请用/进行区分）"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商务邮箱">
              <el-input
                v-model="employeeShow.businessmanEmail"
                disabled
                placeholder="请输入（若需多个，请用/进行区分）"
              >
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="单证">
              <el-select
                v-model="employeeForm.documentSpecialist"
                placeholder="请选择"
                style="width: 100%"
                clearable
                filterable
                @change="documentSpecialistChange"
              >
                <el-option
                  v-for="item in employee"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单证电话">
              <el-input
                v-model="employeeShow.documentSpecialistPhone"
                disabled
                placeholder="请输入（若需多个，请用/进行区分）"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单证邮箱">
              <el-input
                v-model="employeeShow.documentSpecialistEmail"
                disabled
                placeholder="请输入（若需多个，请用/进行区分）"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div>
        <el-button type="default" @click="show = false">取消</el-button>
        <el-button type="primary" @click="modifySubmit">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import vueBus from '@/utils/vueBus'
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable
  },
  computed: {},
  watch: {},
  props: {
    doctype: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      show: false,
      employeeForm: {
        bookingId: this.$route.query.id, //
        sailsman: '', //业务员
        operator: '', //操作人员
        documentSpecialist: '', //单证人员
        businessman: '' //商务人员
      },
      employeeShow: {
        sailsmanPhone: '',
        sailsmanEmail: '',
        businessmanPhone: '',
        businessmanEmail: '',
        documentSpecialistPhone: '',
        documentSpecialistEmail: '',
        operatorPhone: '',
        operatorEmail: ''
      },
      employee: [],
      employeeLoading: false
    }
  },
  methods: {
    // 获取客户选择
    async getEmployeeData(val) {
      this.employeeLoading = true
      let res = await this.$http.get('/api/user/getUserName', {
        keywords: val
      })
      this.employee = res.map((item) => {
        item.label = item.username
        item.value = item.username
        return item
      })
      this.employeeLoading = false
    },
    // 切换
    sailsmanChange(val) {
      if (val) {
        for (const iterator of this.employee) {
          if (iterator.value == val) {
            this.employeeShow.sailsmanPhone = iterator.phone
            this.employeeShow.sailsmanEmail = iterator.email
            break
          }
        }
      } else {
        this.employeeShow.sailsmanPhone = ''
        this.employeeShow.sailsmanEmail = ''
      }
    },
    operatorChange(val) {
      if (val) {
        for (const iterator of this.employee) {
          if (iterator.value == val) {
            this.employeeShow.operatorPhone = iterator.phone
            this.employeeShow.operatorEmail = iterator.email
            break
          }
        }
      } else {
        this.employeeShow.operatorPhone = ''
        this.employeeShow.operatorEmail = ''
      }
    },
    businessmanChange(val) {
      if (val) {
        for (const iterator of this.employee) {
          if (iterator.value == val) {
            this.employeeShow.businessmanPhone = iterator.phone
            this.employeeShow.businessmanEmail = iterator.email
            break
          }
        }
      } else {
        this.employeeShow.businessmanPhone = ''
        this.employeeShow.businessmanEmail = ''
      }
    },
    documentSpecialistChange(val) {
      if (val) {
        for (const iterator of this.employee) {
          if (iterator.value == val) {
            this.employeeShow.documentSpecialistPhone = iterator.phone
            this.employeeShow.documentSpecialistEmail = iterator.email
            break
          }
        }
      } else {
        this.employeeShow.documentSpecialistPhone = ''
        this.employeeShow.documentSpecialistEmail = ''
      }
    },

    // row
    open(row) {
      this.show = true
      const customerList = [
        'sailsman',
        'operator',
        'businessman',
        'documentSpecialist'
      ]
      for (const iterator of customerList) {
        if (row[iterator]) {
          this.employeeForm[iterator] = row[iterator]
          for (const item of this.employee) {
            if (item.value == row[iterator]) {
              this.employeeShow[iterator + 'Phone'] = item.phone
              this.employeeShow[iterator + 'Email'] = item.email
              break
            }
          }
        }
      }
    },

    // 新增
    async modifySubmit() {
      let res = await this.$http.post(
        '/api/sebooking/modifyperson',
        this.employeeForm
      )
      if (res.status) {
        this.$message.success('成功')
        // this.$emit('refresh')
        vueBus.emit('refreshBussiness' + this.$route.query.id, '')
        this.show = false
      } else {
        this.$message.warning(res.message)
      }
    }
  },
  watch: {},

  created() {
    this.getEmployeeData()
  }
})
</script>

<style lang="scss">
.docDetailAddEmployee-dailog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 7px 16px 7px 16px;
  }

  .el-dialog {
    min-width: 630px;
    padding: 0px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
.from-container {
  border: 1px solid #e8e8e8;
  padding: 6px;
  margin-bottom: 8px;
}

:deep(.el-form-item--small .el-form-item__label) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
  margin-right: 0;
}

:deep(.el-form-item--small.el-form-item) {
  margin-bottom: 8px;
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
}
</style>
